<template>
    <!-- 顶部导航 -->
    <nav class="nav">
        <div class="container">
            <div class="logo">
                <img src="http://file.vict5220.top/yxLyGiPtp0__2025_03_19__15_09_34.ico?attname=favicon.ico" alt="APP Logo">
                <span>SIMPLE PROJECT</span>
            </div>
            <div class="nav-links">
                <a href="#features">功能特点</a>
                <a href="#download" @click="toWeb">后台系统</a>
                <a href="#feedback">用户评价</a>
            </div>
        </div>
    </nav>

    <!-- 主视觉区域 -->
    <header class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>让生活更简单</h1>
                <p class="subtitle">一款让您的生活更轻松、更高效的应用</p>
                <div class="download-buttons">
                    <a href="#" class="download-btn ios" @click="download(selectNowVersionVO?.android.fileUrl!, selectNowVersionVO?.android.versionStr!)">
                        <el-image class="w-6 h-6" src="http://file.vict5220.top/Mwd9R92rmW__2025_03_21__10_25_35.png?attname=android%20(3).png"></el-image>
                        <div class="btn-text">
                            <span>下载</span>
                            <span>Android</span>
                        </div>
                    </a>
                    <a href="#" class="download-btn android" @click="download(selectNowVersionVO?.ios.fileUrl!, selectNowVersionVO?.ios.versionStr!)">
                        <el-image class="w-6 h-6" src="http://file.vict5220.top/EXe6aEWwmF__2025_03_21__10_21_27.png?attname=IOS.png"></el-image>
                        <div class="btn-text">
                            <span>下载</span>
                            <span>IOS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </div>
                    </a>
                </div>
                <div class="qr-codes">
                    <div class="qr-code">
                        <qrcode-vue :value="selectNowVersionVO?.ios.fileUrl" :size="100" level="H" />
                        <span>iOS版本</span>
                    </div>
                    <div class="qr-code">
                        <qrcode-vue :value="selectNowVersionVO?.android.fileUrl" :size="100" level="H" />
                        <span>Android版本</span>
                    </div>
                </div>
            </div>
            <div class="hero-image">
                <!-- <img src="app-preview.png" alt="APP预览"> -->
            </div>
        </div>
    </header>

    <!-- 功能特点 -->
    <section id="features" class="features">
        <div class="container">
            <h2>主要功能</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <i class="fas fa-mobile-alt"></i>
                    <h3>界面简洁</h3>
                    <p>精心设计的UI界面，让操作更加简单直观</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-shield-alt"></i>
                    <h3>安全可靠</h3>
                    <p>采用先进的加密技术，保护您的数据安全</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-sync"></i>
                    <h3>实时同步</h3>
                    <p>多设备数据实时同步，随时随地访问</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-clock"></i>
                    <h3>高效便捷</h3>
                    <p>快速响应，让您的操作更加流畅</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 版本信息 -->
    <section id="versions" class="versions">
        <div class="container">
            <div class="version-card android">
                <div class="version-info">
                    <h3>Android版本</h3>
                    <div class="version-details">
                        <span class="version">版本 {{selectNowVersionVO?.android.versionStr}}</span>
                        <!-- <span class="size">大小 23.8MB</span> -->
                        <!-- <span class="system">支持 Android 8.0+</span> -->
                    </div>
                    <div class="version-notes">
                        <h4>更新内容：</h4>
                        <!-- <div v-html="selectNowVersionVO?.android.info">

                        </div> -->
                        <ul>
                            <li v-for="item in infoFormat(selectNowVersionVO?.android.info!)">{{item}}</li>
                            <!-- <li>优化电池使用</li> -->
                            <!-- <li>提升运行稳定性</li> -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="version-card ios">
                <div class="version-info">
                    <h3>iOS版本</h3>
                    <div class="version-details">
                        <span class="version">版本 {{selectNowVersionVO?.ios.versionStr}}</span>
                        <!-- <span class="size">大小 25.6MB</span> -->
                        <!-- <span class="system">支持 iOS 13.0+</span> -->
                    </div>
                    <div class="version-notes">
                        <h4>更新内容：</h4>
                        <ul>
                            <li v-for="item in infoFormat(selectNowVersionVO?.ios.info!)">{{item}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 用户评价 -->
    <section id="feedback" class="feedback">
        <div class="container">
            <h2>用户评价</h2>
            <div class="feedback-grid">
                <div class="feedback-card">
                    <div class="user-info">
                        <!-- <img src="avatar1.jpg" alt="用户头像"> -->
                        <div class="user-details">
                            <h4>张先生</h4>
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p>界面设计非常美观，使用起来特别方便，推荐给大家！</p>
                </div>
                <div class="feedback-card">
                    <div class="user-info">
                        <!-- <img src="avatar2.jpg" alt="用户头像"> -->
                        <div class="user-details">
                            <h4>李女士</h4>
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p>功能非常实用，帮我解决了很多问题，感谢开发团队！</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部信息 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <!-- <img src="logo.png" alt="APP Logo"> -->
                    <p>让生活更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <a href="#">公司介绍</a>
                        <a href="#">联系我们</a>
                        <a href="#">加入我们</a>
                    </div>
                    <div class="link-group">
                        <h4>帮助支持</h4>
                        <a href="#">使用教程</a>
                        <a href="#">常见问题</a>
                        <a href="#">意见反馈</a>
                    </div>
                    <div class="link-group">
                        <h4>关注我们</h4>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-weixin"></i></a>
                            <a href="#"><i class="fab fa-weibo"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 我的APP. All rights reserved.</p>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts" name="propagate">
import QrcodeVue from "qrcode.vue"
import { usePropagateHooks } from './PropagateHooks';
import {download} from '@/utils/FileUtils'

let {
    selectNowVersionVO,
    infoFormat,
    toWeb
} = usePropagateHooks()

</script>


<style scoped>
/* 全局样式 */
:root {
    --primary-color: #1890ff;
    --secondary-color: #40a9ff;
    --text-color: #333;
    --light-text: #666;
    --background: #f5f7fa;
    --white: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f5f7fa;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 导航栏 */
.nav {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 40px;
}

.logo span {
    font-size: 20px;
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #1890ff;
}

/* 主视觉区域 */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    color: #fff;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-content .subtitle {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.download-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #333;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    transition: transform 0.3s;
}

.download-btn:hover {
    transform: translateY(-2px);
}

.download-btn i {
    font-size: 24px;
}

.btn-text {
    display: flex;
    flex-direction: column;
}

.btn-text span:first-child {
    font-size: 12px;
}

.btn-text span:last-child {
    font-size: 16px;
    font-weight: 600;
}

.qr-codes {
    display: flex;
    gap: 30px;
}

.qr-code {
    text-align: center;
}

.qr-code img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    border: 4px solid #fff;
    border-radius: 8px;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* 功能特点 */
.features {
    padding: 80px 0;
    background: #fff;
}

.features h2 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 36px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card {
    text-align: center;
    padding: 30px;
    border-radius: 12px;
    background: #f5f7fa;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card i {
    font-size: 40px;
    color: #1890ff;
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 15px;
}

/* 版本信息 */
.versions {
    padding: 80px 0;
}

.version-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.version-details {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.version-details span {
    color: #666;
}

.version-notes ul {
    list-style: none;
    margin-top: 10px;
}

.version-notes li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.version-notes li:before {
    content: "•";
    color: #1890ff;
    position: absolute;
    left: 0;
}

/* 用户评价 */
.feedback {
    padding: 80px 0;
    background: #fff;
}

.feedback h2 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 36px;
}

.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feedback-card {
    background: #f5f7fa;
    padding: 30px;
    border-radius: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.stars {
    color: #ffc107;
    margin-top: 5px;
}

/* 底部 */
.footer {
    background: #001529;
    color: #fff;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-logo img {
    height: 40px;
    margin-bottom: 15px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.link-group h4 {
    margin-bottom: 20px;
}

.link-group a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.link-group a:hover {
    color: #fff;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    font-size: 24px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav .container {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feedback-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .download-buttons {
        flex-direction: column;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .qr-codes {
        flex-direction: column;
        align-items: center;
    }
} 
</style>